<template>
  <div class="CenterTop">
    <div class="header">基金托管部</div>
    <div class="titlenum">
      <div class="left">
        <div class="title">
          {{ middletopdata[0] && middletopdata[0].numbers[0].title }}
        </div>
        <span class="num"
          ><div class="bottom">
            {{ middletopdata[0] && middletopdata[0].numbers[0].num }}
          </div>
          <div class="top">
            {{ middletopdata[0] && middletopdata[0].numbers[0].num }}
          </div></span
        >
      </div>
      <div class="right">
        <div class="title">
          {{ middletopdata[0] && middletopdata[0].numbers[1].title }}
        </div>
        <div class="num">
          <div class="bottom">
            {{ middletopdata[0] && middletopdata[0].numbers[1].num }}
          </div>
          <div class="top">
            {{ middletopdata[0] && middletopdata[0].numbers[1].num }}
          </div>
        </div>
      </div>
    </div>
    <div class="data">
      <div class="numbers">
        <div class="per">
          <div class="title">
            {{ middletopdata[0] && middletopdata[0].numbers[2].title }}
          </div>
          <div class="num">
            <div class="bottom">
              {{ middletopdata[0] && middletopdata[0].numbers[2].num }}
            </div>
            <div class="top">
              {{ middletopdata[0] && middletopdata[0].numbers[2].num }}
            </div>
          </div>
        </div>
        <div class="per">
          <div class="title">
            {{ middletopdata[0] && middletopdata[0].numbers[3].title }}
          </div>
          <div class="num">
            <div class="bottom">
              {{ middletopdata[0] && middletopdata[0].numbers[3].num }}
            </div>
            <div class="top">
              {{ middletopdata[0] && middletopdata[0].numbers[3].num }}
            </div>
          </div>
        </div>
        <div class="per">
          <div class="title">
            {{ middletopdata[0] && middletopdata[0].numbers[4].title }}
          </div>
          <div class="num">
            <div class="bottom">
              {{ middletopdata[0] && middletopdata[0].numbers[4].num }}
            </div>
            <div class="top">
              {{ middletopdata[0] && middletopdata[0].numbers[4].num }}
            </div>
          </div>
        </div>
      </div>
      <dv-charts :option="option" style="width:472px;height:472px" />
      <div class="agent">
        <div
          class="per"
          v-for="(per, index) in middletopdata[0] && middletopdata[0].agent"
          :key="index"
        >
          <div class="circle"></div>
          <div class="title">{{ per.ip }}</div>
        </div>
      </div>
    </div>
    <LabelTag class="label" :config="labelConfig" />
  </div>
</template>

<script>
import LabelTag from "./LabelTag";
import { getMiddleTop } from "../assets/api/api";
export default {
  components: {
    LabelTag,
  },
  data() {
    return {
      middletopdata: [],
      conf: {
        color: ["#70e992", "#f29960", "#59bdeb", "#3f7eff"],
        legend: {
          right: 90,
          top: 30,
          data: [],
        },
        series: [
          {
            type: "pie",
            data: [],
            radius: ["60%", "100%"],
            insideLabel: {
              show: true,
              style: {
                fontSize: 35,
                fontFamily: "SourceHanSansCN-Medium",
              },
            },
            outsideLabel: {
              show: false,
            },
          },
        ],
      },
    };
  },
  created() {
    this.fetchData();
    this.middletopdata = setInterval(() => {
      this.fetchData();
    }, this.schedule);
  },
  destroyed() {
    clearInterval(this.middletopdata);
  },
  computed: {
    option() {
      let opt = JSON.parse(JSON.stringify(this.conf));
      let piedata = (this.middletopdata[0] && this.middletopdata[0].pie) || [];
      let len = piedata && piedata.length;
      opt.series[0].data = piedata;
      let lengenddata = [];
      for (let i = 0; i < len; i++) {
        lengenddata.push(piedata[i].name);
      }
      return opt;
    },
    labelConfig() {
      let piedata = this.middletopdata[0] && this.middletopdata[0].pie;
      let len = piedata && piedata.length;
      let lengenddata = [];
      for (let i = 0; i < len; i++) {
        lengenddata.push(piedata[i].name);
      }
      let label = {
        data: lengenddata,
      };
      return label;
    },
  },
  methods: {
    fetchData() {
      getMiddleTop().then((res) => {
        this.middletopdata = res.data.result;
      });
    },
  },
};
</script>

<style lang="less" scoped>
.CenterTop {
  font-size: 36px;
  color: #c5f3ff;
  font-family: SourceHanSansCN-Medium;
  .header {
    text-align: center;
    margin: 10px 0;
  }
  .titlenum {
    margin-left: 53px;
    margin-top: 33px;
    display: flex;
    .right {
      margin-left: 642px;
    }
    .left,
    .right {
      width: 350px;
      display: flex;
      .title {
        align-self: flex-end;
        font-family: SourceHanSansCN-Medium;
        font-size: 32px;
        color: white;
        // width: 226px;
      }
      .num {
        align-self: flex-end;
        line-height: 54px;
        margin-left: 14px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 66px;
        background-image: -webkit-linear-gradient(bottom, #f8bf8c, #ffffff);
        background-clip: text;
        -webkit-text-fill-color: transparent;
        .bottom {
          float: left;
          text-shadow: 2px 2px 10px rgba(245, 162, 90, 0.71);
        }
        .top {
          position: absolute;
          float: left;
          z-index: 100;
          background-image: -webkit-linear-gradient(bottom, #f8bf8c, #ffffff);
          background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }
    }
  }
  .data {
    margin-top: 37px;
    margin-left: 90px;
    display: flex;
    .numbers {
      width: 250px;
      margin-right: 122px;
      .per {
        text-align: center;
        margin-bottom: 67px;
        .title {
          // font-family: zcool-gdh;
          font-size: 28px;
          background-image: -webkit-linear-gradient(bottom, #89a1c5, #f5f7fa);
          background-clip: text;
          -webkit-text-fill-color: transparent;
        }
        .num {
          margin-top: 15px;
          font-family: Arial, Helvetica, sans-serif;
          font-size: 46px;
          background-image: -webkit-linear-gradient(bottom, #f8bf8c, #ffffff);
          background-clip: text;
          -webkit-text-fill-color: transparent;
          .bottom {
            display: grid;
            text-shadow: 2px 2px 10px rgba(245, 162, 90, 0.71);
          }
        }
        .top {
          position: relative;
          margin-top: -54px;
          z-index: 100;
          background-image: -webkit-linear-gradient(bottom, #f8bf8c, #ffffff);
          background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }
    }
    .agent {
      height: 432px;
      margin-top: 18px;
      margin-left: 126px;
      flex-direction: column;
      display: flex;
      justify-content: space-between;
      .per {
        display: flex;
        .circle {
          margin-right: 11px;
          align-self: center;
          width: 18px;
          height: 18px;
          background-color: #ff6964;
          border-radius: 50%;
        }
        .title {
          font-family: "Lucida Console", Monaco, monospace;
          font-size: 26px;
          text-align: center;
          color: white;
        }
      }
    }
  }
  .label {
    margin-top: 57px;
  }
}
</style>
